<template>
    <div class="wrapper">
        <minbar title="附近的门店" :isPadding="true"></minbar>
        <!-- 无门店 -->
        <div class="x-nodata" v-if="listData.length==0">
            <image class="x-image" :src="imgsrc"></image>
            <text class="x-title">附近暂无门店</text>
            <text class="x-look">可点刷新重试</text>
            <text class="x-look-btn">点击刷新</text>
        </div>
        <!-- 我关注的门店 -->
        <list show-scrollbar="flase" v-else>
            <refresh class="refresh"  @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
                <loading-indicator class="indicator"></loading-indicator>
            </refresh>
            <cell>
                <x-listpage :listData="listData"></x-listpage>
            </cell>
        </list>
    </div>   
</template>

<script>
import asCore from "../../../common/js/core";
export default {
    components:{
        "minbar" : require("../../../common/component/minbar.vue"),
        "x-listpage" : require("./comp/storeList.vue")
    }, 
    data () {
        return {
            refreshing:false,
            imgsrc:asCore.localpath + "img/store/nostore.png",
            listData:[]
        }
    },
    created() {
        this.getData();
    }, 
    methods:{
       getData(callback){
        //    asCore.post("/member/store/list",{},(data,msg,flag)=>{
        //         if(flag==true){
        //             this.listData = data;
        //         }
        //         callback && callback();
        //    });
       },
       onrefresh(){
            this.refreshing = true;
            this.getData(()=>{
                this.refreshing = false;
            });
       }
    }
}
</script>
<style scoped>
.wrapper{
    background-color: #dedfe1;
}
.iconfont{
    font-family: iconfont;
}
.x-nodata {
    position: absolute;
    top:130;
    bottom: 0;
    left: 0;
    right: 0;
    align-items: center;
    padding-top:300px;
    background-color: #fff;
}
.x-image {
    width: 750px;
    height: 250px;
}
.x-title {
    color:#68686a;
    font-size:28px;
    padding-top:10px;
    padding-bottom:5px;
}
.x-look {
    color:#1f1e24;
    font-size:32px;
}
.x-look-btn {
    margin-top:25px;
    color:#af0a2a;
    font-size: 32px;
    width:300px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 10px;
    border-color: #af0a2a;
    border-width: 1px;
}
.x-look-btn:active {
    background-color: #af0a2a;
    color: #fff;
}
.x-content-top {
    padding-left: 15px;
    justify-content: center;
    height: 95px;
    background-color: #fff;
}
.x-content-title {
    font-size: 32px;
    color:#1f1e24;
}
 /*刷新加载更多类的样式*/
.refresh {
  width: 750;
  display: flex;
  align-items: center;
}
.indicator {
  margin-top: 30px;
  margin-bottom: 20px;
  height: 70px;
  width: 70px;
  color: #ce2020;
}
.indicator-text {
  color: #888;
  font-size: 30px;
  text-align: center;
}
</style>